<template>
	<view>

		<view class="pt1">
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe6d1;</text>
					<text class="f30 ml2">会员ID</text>
				</view>
				<view class="flex a-c ">
					<text class="icon_color f28">{{user.uid}}</text>
				</view>
			</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe6b7;</text>
					<text class="f30 ml2">账号</text>
				</view>
				<view class="flex a-c " @click="on_acct(user.account)">
					<text class="icon_color f28" v-if="user.account">{{user.account}}</text>
					<text class="icon_color f28" v-if="!user.account">设置</text>
					<text class="bicon icon_color f28">&#xe6a3;</text>
				</view>
			</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe6c0;</text>
					<text class="f30 ml2">头像</text>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view v-if="is_init" class="flex a-c" @tap="on_img(0)" style="position:  relative;">
					<image class="q_y" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;" :src="user.face|getFace">
					</image>
					<view class="w800 flex j-c a-c" style="position:  absolute;width: 70rpx;height: 70rpx;color: #fff;">
						<text class="bicon" style="font-size: 40rpx;">&#xe665;</text>
					</view>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="is_init" class="flex j-c a-c ">
					<button hover-class="btn-hover" style="padding: 0;position:  relative;" class="flex j-c a-c"
						type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image class="q_y" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"
							:src="user.face|getFace">
						</image>
						<view class="w800 q_y" style="position:  absolute;top:-7px;color: #fff;margin-left: -16rpx;">
							<text class="bicon">&#xe665;</text>
						</view>
					</button>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>


				<!-- #endif -->
			</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe6d7;</text>
					<text class="f30 ml2">昵称</text>
				</view>
				<view class="flex a-c " @click="on_nickname(user.nickname)">
					<text class="icon_color f28">{{user.nickname}}</text>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe63d;</text>
					<text class="f30 ml2">性别</text>
				</view>
				<view class="flex a-c" @click="Gender1()">
					<text class="icon_color f28">{{user.gender===1?'男':user.gender===2?'女':'设置'}}</text>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
		</view>
		<view class="pb1  " @click="on_user_account">
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe67a;</text>
					<text class="f30 ml2">账号与安全</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
		</view>
		<view class="pb1  " @click="on_third_login_bind">
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe605;</text>
					<text class="f30 ml2">第三方账号绑定</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
		</view>

		<view class="pb1 ">
			<view @click="on_clear" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe613;</text>
					<text class="f30 ml2">清理缓存</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe645;</text>
					<text class="f30 ml2">注册日期</text>
				</view>
				<view class="">
					<text class="f30 icon_color">{{user.reg_time|getTime }}</text>

				</view>
			</view>
			<view @click="article_view(article_2)" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe663;</text>
					<text class="f30 ml2">隐私协议</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<view @click="article_view(article_3)" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe61a;</text>
					<text class="f30 ml2">关于我们</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<view @click="on_set_del" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe663;</text>
					<text class="f30 ml2">注销账户</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<!-- #ifdef APP -->
			<view @click="on_version()" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe6a6;</text>
					<text class="f30 ml2">App版本</text>
					<view v-if="version_data" class="cff q_y set_news">
						<text>new</text>
					</view>
				</view>
				<view class="flex a-c">
					<text class="f26 icon_color">V{{version_no}}</text>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<!-- #endif -->


		</view>

		<view class="pb1 pt1">
			<view @click="on_out()" class="p3 flex a-c j-c" style="height: 120rpx;">
				<text class="f30">退出登录</text>
			</view>
		</view>

		<BanmiPopup ref="alert" :name="title" @confirm="confirm">
			<view class="flex j-c a-c">
				<input class="b_y p2" :placeholder="alert" type="text" v-model="val"
					style="background-color: #F5F5F5;width: 450rpx;height: 80rpx;font-size: 30rpx;" />
			</view>
		</BanmiPopup>
		<lclipper v-if="show" :image-url="imageUrl" @success="ok_img" @cancel="show = false" />
	</view>
</template>

<script>
	import lclipper from "./component/l-clipper/l-clipper.vue";
	import $C from '@/common/banmi/config.js';
	import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js'
	import BanmiPopup from "./component/banmi-popup/index.vue";
	export default {
		components: {
			lclipper,
			BanmiPopup
		},
		data() {
			return {
				user: '',
				alert: '',
				val: '',

				title: '',
				show: false,
				is_init: false,
				is_popup: false,
				imageUrl: '',
				face: {
					url: ''
				},
				platform: uni.getStorageSync('platform'),
				version_data: '',
				version_no: '',
				article_2:uni.getStorageSync('article_2'),
				article_1:uni.getStorageSync('article_1'),
				article_3:uni.getStorageSync('article_3'),
			}
		},
		onLoad() {
			this.Banmikeji.user_info().then(ret => {
				if (ret != 0) {
					this.user = ret.data.user;
					this.is_init = true;
					return
				}
			})
			this.init_version();
		},
		methods: {
			on_third_login_bind() {
				uni.navigateTo({
					url: '/pages/banmi/third_login_bind/third_login_bind'
				})
			},
			init_version() {
				let that = this;
				// #ifdef APP
				plus.runtime.getProperty(plus.runtime.appid, (inf) => {
					that.version_no = inf.version + '.' + inf.versionCode;
					//获取服务器的版本号  
					that.Banmikeji.app_updata(1).then(ret => {
						if (ret.data.status == 200) {
							that.version_data = ret.data.data;
						}
					})
				});
				// #endif
			},
			on_version() {
				let that = this;
				var data = that.version_data;
				if (!data) {
					uni.showToast({
						title: '当前已是最新版本',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/uni_modules/rt-uni-update/rt-uni-update?obj=' +
						JSON.stringify(data)
				});

			},
			on_set_del() {
				uni.navigateTo({
					url: '/pages/banmi/user_delete'
				})
			},
			onChooseavatar(e) {

				this.imageUrl = e.detail.avatarUrl;
				this.show = true;

			},
			ok_img(url) {
				this.show = false;
				let that = this
				var img_list = new Array();
				var map ={
					fileType: 'image',
					filesize: 0,
					filename: '',
					suffix: 'png',
					filepath: url.url,
					width: 200,
					height: 200,
					duration: 0,
				}
				img_list.push(map);
				this.Bmupload.banmi_upload({
					files: img_list,  
					onProgressUpdate: res => {

					}
				}).then(res => {
					that.on_face(res[0]);
				});
			},
			on_face(val) {
				var requestParams = {
					face: val,
				}
				this.Banmikeji.edit_face(requestParams).then(ret => {
					if (ret != 0) {
						this.user.face = ret;
						uni.setStorage({
							key: 'face',
							data: ret
						});
						return
					}
				})
			},

			on_img() {
				var that = this;
				let system = uni.getSystemInfoSync();
				// #ifdef APP 
				if (system.platform === 'android') { // 判断平台
					uni.showModal({
						title: '此功能需要相机和储存权限,才可设置头像',
						content: '请先同意权限才可用此功能',
						confirmText: '同意',
						cancelText: '拒绝',
						success(res) {
							if (res.confirm) {
								that.on_chooseImage();
							}
						}
					});
				} else {
					that.on_chooseImage();
				}
				return
				// #endif

				that.on_chooseImage();

			},
			on_chooseImage() {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that.imageUrl = tempFilePaths[0];
						that.show = true;
					}
				});
			},
			confirm() {
				if (this.title == '设置账号') {
					this.edit_account();
				} else {
					this.edit_nickname();
				}
			},
			edit_nickname() {
				if (!this.val) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}

				let that = this;
				let requestParams = {
					nickname: this.val,
					face: ''
				};
				this.Banmikeji.edit_nickname(requestParams).then(ret => {
					if (ret != 0) {
						this.user.nickname = this.val;
						this.$refs.alert.close()
						return
					}
				})
			},
			edit_account() {
				var val = this.val;
				if (!val) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return
				}
				this.Banmikeji.edit_account(val).then(ret => {
					if (ret != 0) {
						this.$refs.alert.close()
						this.user.account = val;
						return
					}
				})
			},
			on_acct() {
				this.title = '设置账号';
				this.alert = "请输入新的账号";
				this.$refs.alert.open();
			},
			on_nickname() {
				this.title = '设置昵称';
				this.alert = "请输入昵称";
				this.$refs.alert.open();
			},
			Gender1() {
				var that = this;
				uni.showActionSheet({
					itemList: ['男', '女'],
					success: function(res) {

						that.Banmikeji.edit_Gender(res.tapIndex + 1).then(ret => {
							if (ret != 0) {
								that.user.gender = res.tapIndex + 1;
								return
							}
						})
					}
				});
			},
			on_clear() {
				uni.showLoading({
					title: '清理中...'
				})

				setTimeout(function() {
					uni.showToast({
						title: '清理完成',
						icon: "none"
					})
					uni.hideLoading();
				}, 3000);

			},
			on_user_account() {
				uni.navigateTo({
					url: '../../pages/banmi/user_account'
				})
			},
			article_view(index) {

				uni.navigateTo({
					url: '/pages/banmi/article_view?id=' + index
				})
			},
			on_out() {
				uni.showLoading({
					title: '正在退出中...'
				})

				this.Banmikeji.User_out().then(ret => {

				})


				uni.removeStorageSync('token');
				uni.removeStorageSync('user_id');
				uni.removeStorageSync('nickname');
				uni.removeStorageSync('face');



				setTimeout(function() {
					uni.hideLoading();
					uni.$emit('banmi_login', {
						title: 1,
					});
					uni.switchTab({
						url: '/' + $C.out_login
					})
				}, 1000);
			}

		}
	}
</script>

<style>
	button {
		background: none !important;
	}

	button::after {
		border: none;
	}

	.set_news {
		background-color: #FB524F;
		font-size: 24rpx;
		margin-left: 10rpx;
		padding: 1rpx 20rpx 6rpx 20rpx;
	}
</style>